<template>
  <div role="tabpanel" class="tab-panel active" id="Message">
    <ul class="list-group">
      <li class="list-group-item" v-for="item in messages" :key="item.id">
        <!-- 
          在router-link中可以通过name属性直接跳转到目标路径 
          params 传递路由参数
          query  传递查询字符串
          在组件中可以通过 $route.params.key 或 $route.query.key 来获取数据
         -->
        <router-link :to="{name:'msgdetail',params:{id:item.id},query:{content:item.content}}">{{item.content}}</router-link>
      </li>
    </ul>
    <div class="alert alert-success" role="alert">
      <!-- 三级路由展示 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageC",
  data(){
    return {
      messages:[
        {id:1,content:'吃饭'},
        {id:2,content:'睡觉'},
        {id:3,content:'不敲代码'},
      ]
    }
  }
};
</script>

<style scoped>
</style>
